<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input v-model="msg" />
      <p>{{msg}}</p>
      <p>{{log}}</p>
      <p>{{counter.number}}</p>
    </div>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",//vm.arr[0].number=2;
        data: { msg: "123", log: "",counter:{number:0},arr:[{number:0}] },
        watch: {
          //观察msg变量的值的变化，当msg变量发生改变后执行对应的函数
          msg: {
            //当msg变量发生变化时执行对应的函数，handler是定死的
            handler(newValue, oldValue) {
              this.log = `oldValue=${oldValue},newValue=${newValue}`;
            },
            //即使msg没有改变，当vue实例创建后，handler也会至少立刻执行一次
            immediate:true//立刻执行
          },
          //当你监听 的数据是对象的时候，watch默认只能监听到对象的引用地址的变化，无法检测对象内部属性的变化
          counter:{
            handler(newValue, oldValue){
                this.log = `oldValue=${oldValue.number},newValue=${newValue.number}`; 
            },
            //可以使用deep选项来告诉 vue 递归的监视此对象的内部变化
            deep:true
          },
          arr:{
            deep:true,
            handler(newValue, oldValue){
                console.log('arr')
            }
          }
        },
      });
    </script>
  </body>
</html>
